iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
2
Modern Web

Fabricjs 筆記系列 第 18

Day 18 - Fabricjs 實作: 圖片上傳並透過拖曳進入 canvas

  • 分享至 

  • xImage
  •  


今天要也是要來將之前所學到的來做一些簡單但卻也很常用到的實作應用

主要利用 Fabricjs drag 事件以及 HTML 圖片來做一個可以直接將外部圖片拖曳到 Canvas 中,讓我們可以透過 Fabricjs 做後續的操作。

今天就做一個能讓使用者自行上傳圖片,且可以將上傳的圖片自由的拖曳進入 Fabricjs 來讓使用者操作。

圖片上傳

透過 FileReader 將來讀取本地的圖片

function handleFile () {
  const fileReader = new FileReader();
  fileReader.readAsDataURL(this.files[0])
  fileReader.onload = (e) => {
    // 圖片 base64
    const dataURL = e.target.result
    const img = document.createElement('img')
    img.draggable = true
    img.src = dataURL
    img.click = saveImg
    img.addEventListener('mousedown', saveImg)
    imgset.appendChild(img)
  }
}

圖片來源 - pakutaso

紀錄選取目前圖片的 src

在圖片發生 mousedown 事件時,將圖片儲存起來,並且記錄滑鼠點擊圖片的位置。

const imgset = $('imgset')
let movingImage
let imgDragOffset = {
  offsetX: 0,
  offsetY: 0
}
function saveImg (e) {
  if( e.target.tagName.toLowerCase() === 'img' ){
    // 這邊先計算點擊圖片的何處,等滑鼠放開後要重新計算起始座標
    imgDragOffset.offsetX = e.clientX - e.target.offsetLeft
    imgDragOffset.offsetY = e.clientY - e.target.offsetTop
    movingImage = e.target
  }
}
imgset.addEventListener('click', saveImg)

這邊用到 event delegation 的概念讓我們每次新增出來的事件不需重複地去綁定事件

stack overflow - what is event delegation

canvas drop 事件

設定 Fabricjs Drop 事件 canvas.on('drop', dropImg),Drop 事件後,計算出正確的位置,最後使用 new fabric.Image 新增一張圖片,就完成囉。

function dropImg (e) {
  const {offsetX, offsetY} = e.e
  console.log(movingImage)
  const image = new fabric.Image(movingImage, {
    width: movingImage.naturalWidth,
    height: movingImage.naturalHeight,
    scaleX: 100 / movingImage.naturalWidth,
    scaleY: 100 / movingImage.naturalHeight,
    top: offsetY - imgDragOffset.offsetY, // 計算起始位置
    left: offsetX - imgDragOffset.offsetX
  })
  canvas.add(image)
}

canvas.on('drop', dropImg)

本日小結

今天做了一般線上設計常用的功能,能夠插入使用者自己想要的圖片,再讓使用者自由的去透過 Fabricjs 強大的編輯功能去做編輯。

想詳細了解歡迎到下面連結去觀看呦~
Codepen - Day 18 Fabricjs Drag image insert to Canvas

相關連結

Day 4 - 認識各種 Fabricjs 提供的物件型態

Day 8 - Fabricjs 事件

stack overflow - what is event delegation

MDN - FileReader


上一篇
Day 17 - 簡易小畫家實作
下一篇
Day 19 - 實作 Node.js 上傳圖片及操作 Fabricjs 為圖片加上浮水印
系列文
Fabricjs 筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言